<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:fragment="ForthRow" class="row">

    <!-- Start Browser Stats -->
    <div class="col-md-12 col-lg-3">
        <div class="panel panel-widget">
            <div class="panel-title">
                Browser Stats
                <ul class="panel-tools panel-tools-hover">
                    <li><a class="icon"><i class="fa fa-refresh"></i></a></li>
                    <li><a class="icon minimise-tool"><i class="fa fa-minus"></i></a></li>
                    <li><a class="icon expand-tool"><i class="fa fa-expand"></i></a></li>
                    <li><a class="icon closed-tool"><i class="fa fa-times"></i></a></li>
                </ul>
            </div>
            <div class="panel-body">

                <ul class="basic-list">
                    <li>Google Chrome <span class="right label label-default">42.8%</span></li>
                    <li>Firefox <span class="right label label-danger">16.9%</span></li>
                    <li>Safari <span class="right label label-success">15.5%</span></li>
                    <li>Opera <span class="right label label-primary">11.8%</span></li>
                    <li>Internet Explorer <span class="right label label-danger">3.2%</span></li>
                    <li>Mobile <span class="right label label-warning">3%</span></li>
                    <li>Others <span class="right label label-warning">0%</span></li>
                </ul>

            </div>
        </div>
    </div>
    <!-- End Browser Stats -->

    <!-- Start Orders -->
    <div class="col-md-12 col-lg-6">
        <div class="panel panel-widget">
            <div class="panel-title">
                LAST ORDERS <span class="label label-warning">87</span>
                <ul class="panel-tools">
                    <li><a class="icon search-tool"><i class="fa fa-search"></i></a></li>
                    <li><a class="icon minimise-tool"><i class="fa fa-minus"></i></a></li>
                    <li><a class="icon expand-tool"><i class="fa fa-expand"></i></a></li>
                    <li><a class="icon closed-tool"><i class="fa fa-times"></i></a></li>
                </ul>
            </div>

            <div class="panel-search">
                <form>
                    <input type="text" class="form-control" placeholder="Search...">
                    <i class="fa fa-search icon"></i>
                </form>
            </div>


            <div class="panel-body table-responsive">

                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <td class="text-center"><i class="fa fa-trash"></i></td>
                        <td>Order ID</td>
                        <td>Product</td>
                        <td>Buyer</td>
                        <td>Date</td>
                        <td>Payment</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="text-center">
                            <div class="checkbox margin-t-0"><input id="checkbox1" type="checkbox"><label
                                    for="checkbox1"></label></div>
                        </td>
                        <td># <b>8954</b></td>
                        <td>Modern Admin Template</td>
                        <td>John Doe</td>
                        <td>12/10/2015</td>
                        <td>Credit Card</td>
                    </tr>
                    <tr>
                        <td class="text-center">
                            <div class="checkbox margin-t-0"><input id="checkbox2" type="checkbox"><label
                                    for="checkbox2"></label></div>
                        </td>
                        <td># <b>7863</b></td>
                        <td>New Year Product</td>
                        <td>Sarah Smith</td>
                        <td>12/10/2015</td>
                        <td>Paypal</td>
                    </tr>
                    <tr>
                        <td class="text-center">
                            <div class="checkbox margin-t-0"><input id="checkbox3" type="checkbox"><label
                                    for="checkbox3"></label></div>
                        </td>
                        <td># <b>6841</b></td>
                        <td>Lorem ipsum dolor sit amet</td>
                        <td>Stephen Doe</td>
                        <td>12/10/2015</td>
                        <td>Credit Card</td>
                    </tr>
                    <tr>
                        <td class="text-center">
                            <div class="checkbox margin-t-0"><input id="checkbox4" type="checkbox"><label
                                    for="checkbox4"></label></div>
                        </td>
                        <td># <b>5742</b></td>
                        <td>Donec gravida felis</td>
                        <td>Mark Doe</td>
                        <td>12/10/2015</td>
                        <td>Credit Card</td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <!-- End Orders -->


    <!-- Start Inbox -->
    <div class="col-md-12 col-lg-3">
        <div class="panel panel-widget">
            <div class="panel-title">
                Inbox <span class="label label-danger">9</span>
                <ul class="panel-tools">
                    <li><a class="icon minimise-tool"><i class="fa fa-minus"></i></a></li>
                    <li><a class="icon expand-tool"><i class="fa fa-expand"></i></a></li>
                    <li><a class="icon closed-tool"><i class="fa fa-times"></i></a></li>
                </ul>
            </div>
            <div class="panel-body">

                <ul class="mailbox-inbox">

                    <li>
                        <a href="http://www.datouwang.com/" class="item clearfix">
                            <img src="img/profileimg.png" alt="img" class="img">
                            <span class="from">John Doe</span>
                            Hello, m8 how is goin ?
                            <span class="date">22 May</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="item clearfix">
                            <img src="img/profileimg2.png" alt="img" class="img">
                            <span class="from">Sarah Smith</span>
                            Problems look mighty small...
                            <span class="date">22 May</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="item clearfix">
                            <img src="img/profileimg3.png" alt="img" class="img">
                            <span class="from">Stephen Doe</span>
                            New job offer ?
                            <span class="date">22 May</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="item clearfix">
                            <img src="img/profileimg4.png" alt="img" class="img">
                            <span class="from">Kendra Hall</span>
                            Tonight Party
                            <span class="date">22 May</span>
                        </a>
                    </li>


                </ul>

            </div>
        </div>
    </div>
    <!-- End Inbox -->

</div>
</body>
</html>